<template>
  <div class="content">
    <el-card class="char_card" shadow="hover">
      <div id="main" style="height: 500px; width: 400px"></div>
    </el-card>

    <el-card class="suppier_card" shadow="hover">
      <el-table
        :data="suppliers"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="supplierid" label="供应商id"> </el-table-column>

        <el-table-column prop="suppliername" label="供应商名">
        </el-table-column>

        <el-table-column prop="phonetotal" label="手机产品结算资金">
        </el-table-column>

        <el-table-column prop="phonetotal" label="宽带产品结算资金">
        </el-table-column>

        <el-table-column prop="phonetotal" label="流量产品结算资金">
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        background
        @current-change="handleCurrentChange"
        :current-page="currentPageNumber"
        :page-size="currentPageSize"
        layout="prev, pager, next"
        :total="100"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { selectSupplierData } from "../../api/admin";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {},
  data() {
    return {
      suppliers: [],
      currentPageNumber: 1,
      currentPageSize: 5,
      option: {
        title: {
          text: "本电信入库与结算系统供应商结算信息",
          subtext: "基于Echarts实时统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "产品供应数量所占比例",
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleCurrentChange(value) {
      this.currentPageNumber = value;
      this.selectSupplierData();
    },
    async selectSupplierData() {
      await selectSupplierData(this.currentPageNumber, this.currentPageSize)
        .then((res) => {
          let suppliers = res.data.list;
          this.suppliers = suppliers;
          let data = this.option.series[0].data;
          for (let i = 0; i < suppliers.length; i++) {
            let total =
              suppliers[i].phonetotal +
              suppliers[i].broadbandtotal +
              suppliers[i].traffictotal;
            data.push({
              name: suppliers[i].suppliername,
              value: total,
            });
          }
          this.drawLine();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    drawLine() {
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(this.option);
    },
  },
  mounted() {
    this.selectSupplierData();
    // this.drawLine();
  },
};
</script>
<style lang="scss">
.char_card,
.suppier_card {
  display: inline-block;
}
.char_card {
  padding: 20px 0px;
  margin: 0px 10px;
}

.suppier_card {
  padding: 20px 0px;
  height: 500px;
  width: 60%;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
@import "../../assets/css/global.scss";
</style>